<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      :title="formValue.id > 0 ? '编辑餐厅菜系 #' + formValue.id : '添加餐厅菜系'"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :rules="rules"
            :model="formValue"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            :label-width="150"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
              <n-gi span="1">
                <n-form-item label="菜系名称_简体中文" path="cuisineName_zh" :show-require-mark="true">
                  <n-input placeholder="请输入菜系名称" v-model:value="nameLanguage.zh" @blur="translate('name','zh',nameLanguage.zh)" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="菜系名称_English" path="cuisineName_en">
                  <n-input placeholder="请输入菜系名称" v-model:value="nameLanguage.en" @blur="translate('name','en',nameLanguage.en)" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="菜系名称_日本语" path="cuisineName_ja">
                  <n-input placeholder="请输入菜系名称" v-model:value="nameLanguage.ja" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="图片" path="pic">
                  <UploadImage :maxNumber="1" v-model:value="formValue.pic" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="状态" path="status">
                  <n-radio-group v-model:value="formValue.status" name="status">
                    <n-radio-button
                      v-for="status in options.sys_normal_disable"
                      :key="status.value"
                      :value="status.value"
                      :label="status.label"
                    />
                  </n-radio-group>
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="排序" path="sort">
                  <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" style="width: 100px"/>
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm">
            取消
          </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
            确定
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import { Edit, View, MaxSort } from '@/api/foodCuisine';
import { options, State, newState, rules } from './model';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import { useMessage } from 'naive-ui';
import UploadImage from "@/components/Upload/uploadImage.vue";
import {Text} from "@/api/translate";
import {jsontoobj} from "@/utils/smjcomm";

const emit = defineEmits(['reloadTable']);
const message = useMessage();
const settingStore = useProjectSettingStore();
const loading = ref(false);
const showModal = ref(false);
const formValue = ref<State>(newState(null));
const formRef = ref<any>({});
const formBtnLoading = ref(false);
const nameLanguage = reactive({
  en: '',
  zh: '',
  ja: '',
  ko: '',
  zh_CN: '',
});

function translate(type,lang,text){
  if(lang == 'zh'){
    // 简体中文
    nameLanguage.zh_CN = ''
  }else if(lang == 'en'){
    // 韩语
    nameLanguage.ko = ''
  }
  if(text){
    if(lang == 'en'){
      text = text.toLowerCase()
    }
    Text({
      text: text
    }).then((_res) => {
      if(lang == 'zh'){
        // 简体中文
        nameLanguage.zh_CN = _res.zh_CN
      }else if(lang == 'en'){
        // 韩语
        nameLanguage.ko = _res.ko
      }
    }).catch((err) => {

    });
  }
}

function openModal(state: State) {
  showModal.value = true;

  // 新增
  if (!state || state.id < 1) {
    formValue.value = newState(state);
    nameLanguage.zh = '';
    nameLanguage.en = '';
    nameLanguage.ja = '';
    nameLanguage.ko = '';
    nameLanguage.zh_CN = '';

    loading.value = true;
    MaxSort()
      .then((res) => {
        formValue.value.sort = res.sort;
      })
      .finally(() => {
        loading.value = false;
      });
    return;
  }

  // 编辑
  loading.value = true;
  View({ id: state.id,isLanguage: true })
    .then((res) => {
      formValue.value = res;

      if(res.nameLanguage){
        const nameLanguageObj = jsontoobj(res.nameLanguage);
        nameLanguage.zh = nameLanguageObj.zh && nameLanguageObj.zh.content ? nameLanguageObj.zh.content : ''
        nameLanguage.en = nameLanguageObj.en && nameLanguageObj.en.content ? nameLanguageObj.en.content : ''
        nameLanguage.ko = nameLanguageObj.ko && nameLanguageObj.ko.content ? nameLanguageObj.ko.content : ''
        nameLanguage.ja = nameLanguageObj.ja && nameLanguageObj.ja.content ? nameLanguageObj.ja.content : ''
        if(nameLanguageObj.zh_CN){
          nameLanguage.zh_CN = nameLanguageObj.zh_CN.content ? nameLanguageObj.zh_CN.content : ''
        }else if(nameLanguageObj.zh_cn){
          nameLanguage.zh_CN = nameLanguageObj.zh_cn.content ? nameLanguageObj.zh_cn.content : ''
        }else{
          nameLanguage.zh_CN = ''
        }
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

function confirmForm(e) {
  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      formValue.value.nameLanguage = nameLanguage
      Edit(formValue.value).then((_res) => {
        message.success('操作成功');
        formBtnLoading.value = false;
        setTimeout(() => {
          closeForm();
          emit('reloadTable');
        });
      }).catch((err) => {
        formBtnLoading.value = false;
      });
    } else {
      formBtnLoading.value = false;
      message.error('请填写完整信息');
    }
  });
}

function closeForm() {
  showModal.value = false;
  loading.value = false;
}

defineExpose({
  openModal,
});
</script>

<style lang="less"></style>


